<template>
  <div class="tabs-main">
    <a-tabs v-model="tabValue" :tabBarStyle="{ backgroundColor: '#fff', marginBottom: '6px', padding: '0px 8px' }"
      v-if="tabsItems && tabsItems.length>0" @change="changeTabs">
      <a-tab-pane v-for="item in tabsItems" :tab="item.title" :key="item.key" />
    </a-tabs>
    <a-row type="flex" style="flex-flow: inherit;" v-if="reloading">
      <a-col :flex="toggle ? '260px' : '30px'" style="margin-right: 12px;background-color: #fff;">
        <depart-tree :rootOpened="true" :multi="false" @ok="getTreeData" @toggleBool="toggleBool" />
      </a-col>
      <a-col flex="auto" style="width:0;">
        <roll-in :departmentId="departmentId" ref="rollInId" v-if="tabValue === 1" />
        <roll-out :departmentId="departmentId" ref="rollOutId" v-if="tabValue === 2" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import departTree from '../../modules/departTree';
import rollIn from './components/rollIn';
import rollOut from './components/rollOut';

export default {
  components: { departTree, rollIn, rollOut },
  data() {
    return {
      tabsItems: [
        { key: 1, title: '外省转入', },
        { key: 2, title: '转出省外', },
      ],
      tabValue: 1,
      departmentId: null,
      reloading: true,
      toggle: true,
      componentKey: this.$route.query.key,
    }
  },
  created() { },
  async mounted() {
    if (this.componentKey == 'exception-reporting') { //重新申请，异常上报
      this.tabValue = 2
      setTimeout(() => { this.$refs.rollOutId.onQuery() }, 500)
    } else if (this.componentKey == 'cancel-remote-control') { //重新申请，撤销异地管控
      this.tabValue = 1
      setTimeout(() => { this.$refs.rollInId.onQuery() }, 500)
    } else {
      this.$refs.rollInId.onQuery()
    }
  },
  methods: {
    changeTabs(key) {
      console.log(key)
      setTimeout(() => {
        if (key == 1) {
          this.$refs.rollInId.onQuery()
        } else {
          this.$refs.rollOutId.onQuery()
        }
      }, 500)
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = false
      this.$nextTick(() => (this.reloading = true))
    },
    getTreeData(datas, id) {
      console.log(datas, id)
      console.log(id)
      this.departmentId = id
    },
    toggleBool(bool) {
      console.log(bool)
      this.toggle = bool
    },
    getComponents(key) {
      let item = this.components.find(obj => { return obj.type == this.tabValue })
      return item[key]
    },
  }
}
</script>
<style lang="less" scoped>

</style>
